<template>
  <div class="addshop-div">
    <el-page-header>
      <template #breadcrumb>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ name: 'MyCeHome' }">
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'ShopList' }"
            >商品管理</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'ShopList' }"
            >添加商品</el-breadcrumb-item
          >
        </el-breadcrumb>
      </template>
      <template #content>
        <span class="text-large font-600 mr-3"> Title </span>
      </template>
    </el-page-header>

    <main>
      <el-button type="info" style="width: 100%">添加商品信息</el-button>
      <el-steps :active="active" finish-status="success">
        <el-step title="基本信息" />
        <el-step title="商品信息" />
        <el-step title="商品属性" />
        <el-step title="商品图片" />
        <el-step title="商品内容" />
        <el-step title="完成" />
      </el-steps>
      <!-- <el-button style="margin-top: 12px" @click="next">Next step</el-button> -->
      <el-tabs
        :tab-position="tabPosition"
        style="margin-top: 50px"
        class="demo-tabs"
      >
        <el-tab-pane label="基本信息">
          <div class="addshop-div-1">
            <section>
              <span>商品名称</span>
              <el-input v-model="input" />
            </section>
            <section>
              <span>商品价格</span>
              <el-input v-model="input2" />
            </section>
            <section>
              <span>商品数量</span>
              <el-input v-model="input3" />
            </section>
            <section>
              <span>商品重量</span>
              <el-input v-model="input4" />
            </section>
            <section>
              <span>商品分类</span>
              <div class="m-4">
                <el-cascader
                  :options="options"
                  :props="props1"
                  clearable
                  placeholder="请选择"
                />
              </div>
            </section>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品信息"> </el-tab-pane>
        <el-tab-pane label="商品属性"> </el-tab-pane>
        <el-tab-pane label="商品图片"> </el-tab-pane>
        <el-tab-pane label="商品内容"> </el-tab-pane>
      </el-tabs>
    </main>
  </div>
</template>

<script setup>
import VueCookies from "vue-cookies";
import axios from "axios";
import { ref, reactive, onMounted, watchEffect, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const active = ref(0);

const next = () => {
  if (active.value++ > 6) active.value = 0;
};
const tabPosition = ref("left");

const props1 = {
  checkStrictly: true,
};
const options = ref([]);
// 列表参数
let list = ref([]);
onMounted(() => {
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  axios.get("/api/categories", { headers }).then((res) => {
    list.value = res.data.data;
    console.log(list.value);
    for (var i = 0; i < list.value.length; i++) {
      options.value.push({
        id: list.value[i].cat_id,
        label: list.value[i].cat_name,
        children: [],
      });
      for (var k = 0; k < list.value[i].children.length; k++) {
        options.value[i].children.push({
          id: list.value[i].children[k].cat_id,
          label: list.value[i].children[k].cat_name,
          children: [],
        });
        if (list.value[i].children[k].children == undefined) {
          break;
        }
        for (var x = 0; x < list.value[i].children[k].children.length; x++) {
          options.value[i].children[k].children.push({
            id: list.value[i].children[k].children[x].cat_id,
            label: list.value[i].children[k].children[x].cat_name,
          });
        }
      }
    }
  });
});
</script>

<style scoped>
.addshop-div {
  flex-grow: 1;
  height: auto;
  padding: 20px;
}
main {
  flex-grow: 1;
  height: auto;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  position: relative;
}
main >>> .el-steps {
  width: 1000px;
  margin: 10px auto !important;
  position: relative;
}
main >>> .el-step__title {
  position: absolute;
  top: 20px;
  left: -15px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
/* 基本信息 */
main >>> .el-tabs__content {
  position: relative;
}
.addshop-div-1 {
  width: 1000px;
  height: 500px !important;
}
section {
  margin: 0px 0px 20px;
}
section span {
  display: inline-block;
  margin: 0px 0px 10px;
}
</style>